<template>
	<view >
		<!-- 页首 -->
		<zw-header></zw-header>

		<!-- 面包屑 -->
		<bread-crumb pages="个人中心" separator="/"></bread-crumb>

		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="1-1">
			<view class="card-header">
				<view class="left">
					<img class="avatar" :src="userInfo.headImgUrl" />
					<view class="user-info">
						<view class="user-name elip">{{userInfo.name || userInfo.nickName}}</view>
						<view class="tip">{{currentTime}}好~</view>
						<navigator class="link" url="/pages/user/profile/index">修改个人信息></navigator>
					</view>
				</view>
				<view class="right">
					<view class="item">
						<text>账户余额<text class="name">{{userInfo.balance || 0}}</text>元</text>
					</view>
					<view class="item">
						<text>优惠券<text class="name">{{userInfo.balance || 0}}</text>张</text>
					</view>
					<view class="vipBox">
						<view class="vipRow">
							<image src="/static/image/vip.png"></image>
							开通会员享9折优惠
						</view>
						<view class="vipRow">
							<text>去开通</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cardTit">我的订单</view>
			<view class="orderList">
				<view class="order"><text>0</text>待发货</view>
				<view class="order"><text>0</text>待收货</view>
				<view class="order"><text>0</text>待评价</view>
				<view class="order"><text>0</text>售后</view>
			</view>
			<view class="cardTit">为你推荐</view>
			<view class="goodBox wrap" >
				<view class="goodsList"  >
					<view class="goodsMain">
						<view class="goodsItem"  v-for="(goods,i) in goodsList" :key="i">
							<a :href="`#/pages/goods/index?id=${goods.id}`" target="_blank" >
								<u-lazy-load
								 :image="goods.logoUrl" 
								 img-mode="widthFix"
								 :duration='100'
								 ></u-lazy-load>
								
								<view class="goodsName elip_2">
									<text v-if="goods.name.length<15">{{goods.name}}<text class="nbsp">商品名称占位修饰商品名称占位修饰</text></text>
									<text v-else>{{goods.name}}</text>
								</view>
								<view class="goodsPrice">
									<text class="price">
										¥<text class="priceBox">{{goods.price}}</text>
									</text>
								</view>
								<view class="goodsTip">
									<text class="elip_1">{{goods.sellerName}}</text>
								</view>
								<view class="goodsZw"></view>
							</a>
						</view>
					</view>
					<view class="goods-empty" v-if="goodsList.length == 0">
						<image src="/static/image/common/nullInfo.png" mode='widthFix'></image>
						暂无商品~
					</view>
				</view>
			</view>
		</menu-wrapper>

		<!-- 页脚 -->
		<zw-footer></zw-footer>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';
	import {
		encrypt,
	} from '@/utils/jsencrypt';
	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				userInfo:{},
				accountInfo: {},
				counts: [],
				goodsList:[],
				pageNum:1,
				currentMax:1
			}
		},
		computed: {
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad() {
			this.getUpdUserInfo()
			this.getList()
		},
		onReachBottom() {
			if (this.pageNum < this.currentMax) {
				this.pageNum++;
				this.getList();
			} else {
				
			}
		},
		
		methods: {
			getUpdUserInfo() {
				this.uni_request({
					url: '/user/info',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.userInfo = res.data.data
							uni.setStorageSync('userInfo', this.userInfo)
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			
			getList(){
				var that = this
				var params = {
					pageSize:18,
					pageNum:this.pageNum
				}
				uni.request({
					url: this.serverUrl + '/goods/list',
					data:params,
					method: 'GET',	
					header:{
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							that.currentMax = Math.ceil(res.data.total / 10);
							var data = res.data.rows;
							for (var i = 0; i < data.length; i++) {
								that.goodsList.push(data[i])
							}
						} else {
							
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.card-header {
		margin-top: 24px;
		padding: 15px 20px;
		@extend %flex-align-center;
		justify-content: space-between;
		background: rgb(255,245,238);
		.left {
			@extend %flex-align-center;
			.avatar {
				width: 130px;
				height: 130px;
				padding: 4px;
				border: 1px solid $border-color;
				border-radius: 50%;
				object-fit: fill;
			}

			.user-info {
				width: 302px;
				margin-left: 20px;

				.user-name {
					max-width: 220px;
					font-size: 25px;
					font-weight: 600;
					color: #616161;
				}

				.tip {
					margin-top: 5px;
					color: #b0b0b0;
				}

				.link {
					display: inline-block;
					font-size: 12px;
					margin-top: 30px;
					color: $color-primary;
				}
			}
		}

		.right {
			display: flex;
			align-items: flex-start;
			background: #fff;
			height: 130px;
			width: 320px;
			justify-content: space-between;
			padding: 10px;border-radius: 5px;
			position: relative;
			.item {
				
				@extend %flex-align-center;
				padding: 10px 0;cursor: pointer;
				color: #333;font-size: 14px;
				.name{font-size: 18px;margin: 0 3px;}
			}
			.item:hover{
				color: $color-primary;
			}
			.vipBox{
				background: rgb(250, 231, 212);
				position: absolute;
				bottom: 15px;
				border-radius: 5px;@extend %flex-align-center;
				justify-content: space-between;
				height: 40px;width:calc(100% - 20px);
				padding: 0 10px;
				image{height: 20px;width: 20px;margin-right: 8px;}
				.vipRow{
					color:#00003d !important;font-size: 14px;font-weight: bold;
					text{
						@extend %flex-align-center;letter-spacing: 1px;cursor: pointer;
						font-size: 13px;background: #00003d;height: 27px;padding: 0 10px;border-radius: 5px;color:#eeefff;
					}
					@extend %flex-align-center;
				}
			}
		}
	}
	.cardTit{
		color: #1f1f1f;
		font-size: 20px;
		font-weight: 600;
		margin: 12px 0;
	}
	.orderList {
		@extend %flex-align-center;
		justify-content: space-around;
		padding: 15px 10px;
		
		.order {
			@extend %flex-align-center;
			justify-content: center;
			flex-direction: column;
			cursor: pointer;
			font-size: 16px;
			text {
				color: #1A1A1A;
				font-size: 23px;
				font-weight: 400;
				line-height: 20px;
				text-align: center;
				width: 48px;
				margin-bottom: 5px;
			}
		}
		.order:hover{
			color: $color-primary !important;
			text{color: $color-primary !important;}
		}
		
	}
	.goodBox {
		width: 100%;
		overflow: hidden !important;
		background: #ffffff;
		.goodsList{
			min-height: 700px;
			max-width: $page-width;
			min-width: $page-minwidth;
			padding: 10px 0;
			.goodsMain{
				display: grid;
				grid-template-columns: repeat(6, 1fr); /* 6列，每列等宽 */
				grid-gap: 20px;
				column-gap:20px;
				max-width: calc($page-width - 20px);
				min-width: calc( $page-minwidth - 20px);
				padding: 0 10px;
				.goodsItem{
					position: relative;overflow: hidden;border-radius: 8px;
					display: flex;align-items: center;flex-direction: column;
					width: 100%;background-color: #ffffff;
					cursor: pointer;
					image{
						aspect-ratio: 1 / 1;
					}
					.goodsName{
						color: #4f4f4f;font-size: 15px;
						width: calc(100% - 10px);margin: 5px;
						min-height: 40px;
						display: flex;justify-content: flex-start;align-items: center;
					}
					.goodsTip{
						display: flex;justify-content: space-between;align-items: center;
						padding: 0 10px;color: #999;font-size: 12px;position: absolute;
						bottom:16px;width: calc(100% - 20px);
					}
					.goodsZw{
						height: 10px;
						
					}
					.goodsPrice{
						padding: 5px 10px;width: calc(100% - 20px);
						display: flex;justify-content: flex-start;align-items: center;
						.price{
							color: $color-primary;font-size: 16px; font-weight: 700;
						}
						.priceBox{font-size: 22px; font-weight: 700;margin-left: 2px;}
						.market{
							background: rgb(253, 226, 94);
							color: #633b14;
							font-size: 12px;
							padding: 1px 2px;
							border-radius: 3px;
							margin-left: 8px;
						}
					}
				}
				.goodsItem:hover{
					border: 1px solid $color-primary;
					transform: scale(1.02);
					box-shadow: 0 5px 10px rgba(244, 104, 10, 0.1);
				}
			}
		}
	}
	.goods-empty {
		color: $text-color;
		height: 650px;
		width: 100%;color: #999;
		display: flex;align-items: center;justify-content: center;flex-direction: column;
	}
</style>
